<template>
  <div class="app-container">
    <div class="top" style="margin-top: 28px;">
      <el-input
        v-model="kwInput"
        placeholder="输入 Reference Code"
        class="input-with-select"
        clearable
        @keyup.native.enter="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" :disabled="loading || !kwInput" @click="handleSearch">搜索</el-button>
      </el-input>

    </div>

    <el-card v-if="data.product.id" v-loading="loading" style="margin-left: 20px">
      <div v-if="data.supplier">
        <span>供应商名称:          {{ data.supplier.name }}</span>
      </div>

      <div v-if="data.supplier">
        <span>供应商站点:          {{ data.supplier.site }}</span>
      </div>

      <div v-if="data.supplier" class="line" />

      <div>
        <span>站点地址:          {{ data.website.domain }}</span>
      </div>

      <div class="line" />

      <div>
        <span>产品名称:          {{ data.product.name }}</span>
      </div>

      <br>
      <div>图片:</div>
      <div v-for="item in data.product.imgs" :key="item.id">
        <img class="img-thumbnail" :src="item.url" @click="handleViewImage(scope.row.main)">
      </div>
    </el-card>

  </div>
</template>

<script>
import { ProductQuery } from '@/api/erp/elicink/product'

export default {
  name: 'ProductQuery',
  data() {
    return {
      data: {
        product: {},
        website: {},
        supplier: {}
      },
      listLoading: true,
      // 输入
      kwInput: '',

      loading: false
    }
  },
  methods: {
    // 点击搜索
    handleSearch() {
      this.loading = true
      ProductQuery({
        code: this.kwInput
      })
        .then(response => {
          this.data = response.data
          console.log(111, response.data)
          this.loading = false
        }).catch(err => {
          console.log(err)
          this.loading = false
        })
    }
  }
}
</script>

<style scoped>

  .line {
    height: 1px;
    background-color: #d3d3d3;
    display: inline-block;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 20px;
  }

  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

  .input-with-select {
    width: 100%;
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 130px
  }

  .top {
    padding-left: 20px;
    margin-bottom: 30px;
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> span.el-tag--info {
    word-break: normal;
    width: auto;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
  }
</style>
